<template>
  <div class="wai">
    <nav class="toback">
      <router-link to="/">
        <!-- <Icon type="chevron-left" class="toleft" /> -->
        <span class="fl"><Icon type="ios-close-empty"></Icon></span>
      </router-link>
      <!-- <i class="search"></i> -->
      <span>...</span>
      <p>算算能省多少</p>
    </nav>

      <div class="span_inpnt">

        <div class="input">
          <div class="input_text"><input type="inputName" v-model="inputName" placeholder="消费工具品牌:例：拉卡拉"></div>
        </div>
        <hr class="input_hr"/>
         <div class="input">
          <div class="input_text"><input type="inputXfje" v-model="inputXfje" placeholder="每月消费金额:例：10000"></div>
        </div>
        <hr class="input_hr"/>
         <div class="input">
          <div class="input_text"><input type="inputFl" v-model="inputFl" placeholder="消费工具费率:例：0.0065"></div>
        </div>
        <hr class="input_hr"/>
        <div class="input">
          <div class="input_text"><input type="inputSxf" v-model="inputSxf" placeholder="D0手续费(笔):例：3"></div>
        </div>
        <hr class="input_hr"/>
        <div class="btn" @click="handleSys">算算省多少</div>
      </div>

    <div  class="span_gj" v-for="item in List" :key="item.posId">
      <hr/>
        <div class="span_gj_img"><img :src="item.detilImg"/></div>
        <div @click="goto(item.instructions4Use)" >
          <div class="span_gj_right">
            <div class="span_gj_text1">{{item.posName}}(扣率{{(item.deductionate*100).toFixed(2)}}%，返199元)</div>
            <div class="span_gj_text2">省：{{parseInt(item.saveHowMoney)}}元</div>
            <div class="span_gj_text3">{{(item.rate*100).toFixed(2)}}%</div>
            <div class="span_gj_text4">费率</div>
            <div class="span_gj_text5">
              <img v-if="item.identifier == 1" src="../../assets/img/xfsq/re1.png"/>
              <img v-else src="../../assets/img/xfsq/bao1.png"/>
            </div>
            <div class="span_gj_text6">支付牌照：{{item.detilText}}</div>
          </div>
        </div>

    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Sssds",
  data() {
    return {
      List: [],
      inputName:'',
      inputXfje:'',
      inputFl:'',
      inputSxf:'',
    };
  },
  methods:{

    goto(instructions4Use){
      window.open('http://'+instructions4Use)
    },
    handleSys() {
      var _this = this;
      axios
        .post("/web/api/podji/saveHowMoney",{
          "posName":this.inputName,
          "rate":this.inputFl,
          "money":this.inputXfje,
          "count":this.inputSxf,
          })
        .then(function(res) {
          var data = res.data.date;
          _this.List = data;
          console.log(data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="stylus" scoped>
.wai
  width 100%
  margin-bottom 7rem
  .toback
    width 100%
    font-size 1.8rem
    line-height 2.6
    border-bottom 1px solid #eee
    p
      text-align center
    .toleft
      float left
      font-size 2.2rem
      color #FF3737
      padding 1rem 2rem
    .search
      display inline-block
      width 2.2rem
      height 2.2rem
      margin 0.8rem 1.6rem
      float right
      // background url('../imgs/2x/icon-search.png') 50% 50% no-repeat
      background-size 1.8rem 1.8rem
    span
      display inline-block
      float right
      font-size 1.8rem
      color #FF3737
      padding 0rem 1rem
    .fl
      float left
      font-size 4rem
      line-height 1.2
  .span_inpnt
      width 95%
      margin-left 2.5%
      height 30rem
      text-align center
      padding-top 0.1rem
      border-radius 2rem
      .input
        margin-left 5%
        margin-top 1rem
        height 4rem
        width 90%
        text-align center
        background #fff
        border-radius 0.2rem
        .input_text
          margin-left 2rem
          margin-top 0.5rem
          float left
          width 4rem
          height 3rem
          input
            width 17rem
            height 3rem
            border none
            outline none
            color  #b3b3b3
      .input_hr
        margin-left 10%
        width 80%
        height:1px
        border:none
        border-top:1px solid #b3b3b3
      .btn
        margin-top 2rem
        margin-left 10%
        width 80%
        height 2.8rem
        background #3b83c5 url(../../assets/img/Register/login_btn.png) no-repeat 100% 100%
        text-align center
        line-height 2.8rem
        color #ffffff
        border-radius 2rem
  .span_gj
    width 100%
    .span_gj_img
      float left
      width 20%
      text-align center
      height 7rem
      padding-top 1rem
      img
        width 80%
        height 5rem
    .span_gj_right
      width 100%
      height 7rem
      .span_gj_text1 {
        height: 2rem;
        width: 55%;
        float: left;
        color:#333333;
      }

      .span_gj_text2 {
        height: 2rem;
        float: left;
        width: 25%;
        text-align: center;
        color: #FAC127;
      }

      .span_gj_text3 {
        width: 30%;
        height: 3rem;
        font-size: 2rem;
        float: left;
        line-height: 3rem;
        color: #FAC127;
      }

      .span_gj_text4 {
        width: 10%;
        height: 3rem;
        line-height: 3rem;
        float: left;
        color:#b2b2b2;
      }

      .span_gj_text5 {
        float: left;
        width: 40%;
        height: 3rem;
        line-height: 3rem;
        text-align: right;
        color:#b2b2b2;

        img {
          width: 3rem;
          height: 2rem;
        }
      }

      .span_gj_text6 {
        float: left;
        width: 80%;
        color:#b2b2b2;
      }




</style>

